<template>
  <div class="h5-seat-selection">
    <!-- 影院信息区域 -->
    <div class="cinema-info">
      <h1 class="movie-title">{{ movieInfo.title }}</h1>
      <div class="movie-meta">{{ movieInfo.date }} {{ movieInfo.type }}</div>
      <div class="hall-name">{{ movieInfo.hall }}</div>
    </div>
    <!-- 座位图区域 -->
    <SeatMap
      v-model:selectedSeats="selectedSeats"
      :seatData="store.seatCells"
      @seat-click="handleSeatClick"
    />

    <div>
    <!-- 推荐座位区域 -->
    <div class="recommendation-section" v-if="selectedSeats.length === 0">
        <div class="section-title">推荐选座</div>
        <div class="recommendation-buttons">
          <button 
            v-for="count in [1, 2, 3, 4]" 
            :key="count" 
            class="recommendation-button"
            @click="recommendSeats(count)"
          >
            {{ count }}人
          </button>
        </div>
      </div>
      
      <!-- 已选座位和操作区域 -->
      <div class="selected-seats-section" v-if="selectedSeats.length > 0">
        <div class="selected-seats-info">
          <div class="seat-count">已选{{ selectedSeats.length }}个座位</div>
          <div class="seat-details">
            <span v-for="(seat, index) in selectedSeats" :key="index">
              {{ seat.row }}排{{ seat.column }}座
              <span v-if="index < selectedSeats.length - 1">, </span>
            </span>
          </div>
          <div class="total-price">总价: ¥{{ totalPrice }}</div>
        </div>
      </div>
      
      <!-- 底部操作按钮 -->
      <div class="bottom-action">
        <button 
          class="confirm-button" 
          :disabled="selectedSeats.length === 0"
          @click="confirmSelection"
        >
          {{ selectedSeats.length > 0 ? '请选座位' : '确认选座' }}
        </button>
      </div>
    </div>
 
  </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { store } from '../../store/stroe';
import SeatMap from './component/SeatMap.vue';

// 影院和电影信息
const movieInfo = reactive({
  title: '三体2: 黑暗森林',
  date: '2021年1月22日',
  type: '国语3D',
  hall: '5号厅'
});

// 座位相关数据
const selectedSeats = ref([]);

// 计算总价
const totalPrice = computed(() => {
  return selectedSeats.value.reduce((sum, seat) => sum + seat.price, 0);
});

// 初始化座位数据
if (store.value.seatCells.length === 0) {
  // 如果store中没有数据，使用示例数据
  const sampleData = {
    "seatCells": [
      // 示例数据，实际应从API获取
      {"x": 0, "y": 1, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},

      {"x": 1, "y": 2, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "unavailable"},
      {"x": 2, "y": 2, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "unavailable"},
      {"x": 10, "y": 2, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
      {"x": 3, "y": 3, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "unavailable"},
      {"x": 4, "y": 3, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "unavailable"},
      {"x": 5, "y": 4, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "unavailable"},
      {"x": 3, "y": 5, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
      {"x": 4, "y": 5, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
      {"x": 5, "y": 5, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
      {"x": 6, "y": 5, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
      {"x": 7, "y": 6, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
      {"x": 8, "y": 6, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
      {"x": 3, "y": 7, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
      {"x": 4, "y": 7, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
      {"x": 5, "y": 7, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
      {"x": 6, "y": 7, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
      {"x": 7, "y": 7, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
      {"x": 8, "y": 7, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
      {"x": 9, "y": 7, "id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60, "status": "available"},
    ],
    "seatTypes": [
      {"id": 0, "name": "普通座位", "color": "rgba(29, 220, 194, 1)", "price": 60}
    ]
  };
  
  store.value.seatCells = sampleData.seatCells;
  store.value.seatTypes = sampleData.seatTypes;
}

// 处理座位点击事件
function handleSeatClick(seat) {
  // 不在这里直接修改selectedSeats，因为已经通过v-model:selectedSeats进行了双向绑定
  // SeatMap组件会通过emit('update:selectedSeats')更新状态
}

// 推荐座位
function recommendSeats(count) {
  // 清除当前选择
  selectedSeats.value = [];
  
  // 获取可用座位
  const availableSeats = store.value.seatCells.filter(seat => seat.status !== 'unavailable');
  
  // 简单推荐算法 - 选择中间位置的座位
  if (availableSeats.length >= count) {
    // 按行分组座位
    const seatsByRow = {};
    availableSeats.forEach(seat => {
      if (!seatsByRow[seat.y]) seatsByRow[seat.y] = [];
      seatsByRow[seat.y].push(seat);
    });
    
    // 找出座位数量足够的行，并且优先选择中间行
    const rows = Object.keys(seatsByRow).map(Number).sort((a, b) => a - b);
    const middleRowIndex = Math.floor(rows.length / 2);
    
    // 从中间行开始查找连续座位
    for (let i = 0; i < rows.length; i++) {
      const rowIndex = (middleRowIndex + (i % 2 === 0 ? i / 2 : -Math.ceil(i / 2))) % rows.length;
      const row = rows[rowIndex];
      const rowSeats = seatsByRow[row].sort((a, b) => a.x - b.x);
      
      // 查找连续的座位
      if (rowSeats.length >= count) {
        // 找出中间位置
        const middleSeatIndex = Math.floor(rowSeats.length / 2) - Math.floor(count / 2);
        
        // 选择连续的座位
        for (let j = 0; j < count; j++) {
          selectedSeats.value.push({
            ...rowSeats[middleSeatIndex + j],
            row: rowSeats[middleSeatIndex + j].y,
            column: rowSeats[middleSeatIndex + j].x
          });
        }
        break;
      }
    }
  }
}

// 确认选座
function confirmSelection() {
  if (selectedSeats.value.length > 0) {
    alert(`已选择 ${selectedSeats.value.length} 个座位，总价: ¥${totalPrice.value}`);
    // 这里可以跳转到订单页面或调用下单API
  }
}
</script>

<style scoped>
.h5-seat-selection {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 影院信息区域 */
.cinema-info {
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.movie-title {
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: bold;
}

.movie-meta {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.hall-name {
  font-size: 14px;
  color: #333;
}


.pixi-container {
  width: 100%;
  height: 38vh;
  touch-action: none;
}

.screen-indicator {
  width: 60%;
  height: 20px;
  background-color: #ddd;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #666;
}



.legend-item {
  display: flex;
  align-items: center;
  margin: 0 10px;
}

.seat-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-right: 5px;
}

.seat-icon.available {
  background-color: #1DDCC2;
}

.seat-icon.unavailable {
  background-color: #E74C3C;
}

.seat-icon.selected {
  background-color: #2ECC71;
}

/* 推荐座位区域 */
.recommendation-section,.selected-seats-section {
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  height: 94px;
  box-sizing: border-box;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.recommendation-buttons {
  display: flex;
  justify-content: space-between;
}

.recommendation-button {
  flex: 1;
  margin: 0 5px;
  padding: 8px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.recommendation-button:first-child {
  margin-left: 0;
}

.recommendation-button:last-child {
  margin-right: 0;
}


.seat-count {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.seat-details {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.total-price {
  font-size: 16px;
  color: #ff5722;
  font-weight: bold;
}

/* 底部操作按钮 */
.bottom-action {
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}

.confirm-button {
  width: 100%;
  padding: 12px 0;
  background-color: #ff5722;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.confirm-button:disabled {
  background-color: #ddd;
  color: #999;
  cursor: not-allowed;
}
</style>